import React, { Component } from 'react';
import { Menu, Icon, Layout, Dropdown, } from 'antd';

const { Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;


class HeaderMain extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      name: 'headerMain',
      visible: false,
      selectVal: 'Clicking me 1',
      // current: 'mail',
    }
  }
  state = {
    current: 'mail',
  }
  
  componentDidMount() {

  }
  
  // 下拉菜单
  handleMenuClick = (e) => {
    // console.log(e)
    let val = ''
    e.key === '1' ? 
      val = 'Clicking me1' :
      e.key === '2' ? 
        val = 'Clicking me2' :
        e.key === '3' ? 
          val = 'Clicking me3' : val = 'hover me'
    this.setState({ 
      visible: false,
      selectVal: val
    });
    // if (e.key === '3') {
    //   this.setState({ visible: false });
    // }
  }
  handleVisibleChange = (flag) => {
    this.setState({ visible: flag });
  }

  // 头部导航
  handleClick = (e) => {
    // console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }
  render() {
    // console.log(this.props)
    const selectOptions = [
      {key: 1, val: 'Clicking me1'},
      {key: 2, val: 'Clicking me2'},
      {key: 3, val: 'Clicking me3'},
    ]
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        {
          selectOptions.map( (v,i) => 
            <Menu.Item key={v.key}>{v.val}</Menu.Item>
          ) 
        }
        {/* <Menu.Item key="1">Clicking me 1</Menu.Item>
        <Menu.Item key="2">Clicking me 2.</Menu.Item>
        <Menu.Item key="3">Clicking me 3</Menu.Item> */}
      </Menu>
    );
    
    return(
      <Header className="flex-row header-main">
        <div className="header-drop">
          <Dropdown overlay={menu}
            onVisibleChange={this.handleVisibleChange}
            visible={this.state.visible}
          >
            <a className="ant-dropdown-link" href="/">
              {this.state.selectVal} <Icon type="down" />
            </a>
          </Dropdown>
          <span style={{color: '#fff'}}>{this.state.selectVal}</span>

          <div style={{display: 'none'}}>
            {selectOptions.map( (v,i) => {
                return (
                  <p key={v.key}>{v.key}-{v.val}</p>
                )
              } 
            )}
          </div>

        </div>
        {
          this.state.visible ?
          <div className="header-nav">
            <Menu
              onClick={this.handleClick}
              selectedKeys={[this.state.current]}
              mode="horizontal"
            >
              <Menu.Item key="mail">
                <Icon type="mail" />Navigation One
              </Menu.Item>
              <Menu.Item key="app" disabled>
                <Icon type="appstore" />Navigation Two
              </Menu.Item>
              <SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
                <MenuItemGroup title="Item 1">
                  <Menu.Item key="setting:1">Option 1</Menu.Item>
                  <Menu.Item key="setting:2">Option 2</Menu.Item>
                </MenuItemGroup>
                <MenuItemGroup title="Item 2">
                  <Menu.Item key="setting:3">Option 3</Menu.Item>
                  <Menu.Item key="setting:4">Option 4</Menu.Item>
                </MenuItemGroup>
              </SubMenu>
            </Menu>
          </div> : null
        }
        
      </Header>
    )
  }

}

export default HeaderMain;